<template>
	<view class="Purchasemain">

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="showProp">
				<view class="showtitle">请选择付款方式</view>
				<view class="uni-list">
					<radio-group @change="radioChange" class="payList">
						<label class="radio">
							<radio value="2" :checked="canPay" style="font-size: 28rpx;" />微信支付</label>
						<label class="radio">
							<radio value="1" style="font-size: 28rpx;" :checked="!canPay" :disabled="canPay" />账户余额支付 <text style="font-size: 20rpx; color: #999999;">(￥{{Number(money).toFixed(2)}})</text></label>

					</radio-group>
				</view>
				<view class="sub">
					<!-- <button type="default" @click="cancel">取消</button> -->
					<button type="primary" @click="deter">确定</button>
				</view>
			</view>
		</uni-popup>

		<view class="Purchasehd">
			<view class="aboutALL">
				<!-- 头部 -->
				<view @click="go()" class="head" style="border-bottom: 1px solid #F1F1F1;">
					<!-- 商品图片+名字+箭头 -->
					<view class="goodsname">
						<!-- 商家图片 -->
						<image style="width: 80rpx;height: 80rpx;" :src="shopimg" mode=""></image>
						<!-- 商家名称 -->
						<text style="color:#333333;font-size:34rpx;margin-left:20rpx;font-weight: bold;">{{commodityName}}</text>
						<image style="width: 14rpx;height: 26rpx;margin-left: 20rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/rightarrow.png"
						 mode=""></image>
					</view>
				</view>
				<!-- 内容 -->
				<view class="goodscont">
					<view class="conent">
						<!-- 商品名称 -->
						<text style="color: #333333;font-size:24rpx;">{{explains}}</text>
						<!-- 商品数量 -->
						<text style="color: #999999;font-size: 20rpx;font-weight: lighter;margin-left: 20rpx;">1份</text>
						<!-- 商品价格 -->
						<text class="money">￥{{Number(currentPrice).toFixed(2)}}</text>
					</view>
				</view>
				<!-- 支付 -->
				<view class="pay">
					<view class="goodspay">
						<!-- 总价 -->
						<view class="allmoney">
							<text style="color: #333333;font-size: 20rpx;">总价: </text>
							<text style="color: #333333;font-size: 20rpx;margin-left: 10rpx;">￥{{Number(currentPrice).toFixed(2)}}</text>
						</view>
						<!-- 优惠 -->
						<view class="discount" style="margin-left:28rpx;">
							<text style="color: #333333;font-size: 20rpx;">优惠: </text>
							<text style="color: #333333;font-size: 20rpx;margin-left: 10rpx;">￥{{Number(discountsMoney).toFixed(2)}}</text>
						</view>
						<!-- 实付款 -->
						<view class="actual" style="margin-left:45rpx;">
							<text style="color: #333333;font-size: 20rpx;margin-right:30rpx;">实付款:</text>
							<text style="color: #000000;font-size: 20rpx;margin-left: 46rpx;">￥</text>
							<text style="color: #FF6633;font-size: 28rpx;font-weight: bold;">{{Number(presentmoney).toFixed(2)}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 使用红包 -->
			<view class="usered">
				<view class="redbug">
					<text>使用红包</text>
				</view>
				<view class="monenybug">
					<text>现金红包</text>
					<text>￥{{Number(redPackets).toFixed(2)}}</text>
				</view>
			</view>
			<!-- 备注 -->
			<view class="usered">
				<view class="redbug">
					<text>备注</text>
				</view>
				<view class="monenybug">
					<input type="text" value="" placeholder="请输入备注信息" @input="onInput" />
				</view>
			</view>
		</view>
		<view class="paymoney">
			<view class="paymoney_all">
				<text style="color: #FDC200;font-size: 30rpx;">总计:</text>
				<text style="color: #FDC200;font-size: 34rpx;font-weight:bold">￥{{Number(presentmoney).toFixed(2)}}</text>
			</view>
			<view class="other">
				<text>已优惠 ￥{{Number(discountsMoney).toFixed(2)}}</text>
				<text>红包 ￥{{Number(redPackets).toFixed(2)}}</text>
			</view>
			<view class="acturpay" @click="open(presentmoney)">
				<text>确认支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},

		computed: {
			canPay() {
				return this.userMoney > this.money //  调试完了吧这个放开
			}
		},

		data() {
			return {
				value: '',
				shopimg: '',
				merchantName: '',
				currentPrice: '',
				commodityName: '',
				explains: '',
				discountsMoney: 0,
				totalMoney: '',
				redPackets: '',
				// 减去优惠券之后的价格
				presentmoney: 0,
				presentList: [],
				num: 1,
				actList: [],
				userMoney: '',
				money: 0, //这个钱是当前的账户余额
				payType: 1,
				orderId:'',
			}
		},
		onLoad(option) {
			// 支付界面
			// 商品id
			this.optionId = option.pay
			console.log(this.optionId)
			const requestPay = {
				url: `/api/order/selectPayPage/${this.optionId}`,
				method: "get",
				callBack: (res) => {
					this.text = 'request success';
					this.shopimg = res.data.image
					this.commodityName = res.data.commodityName
					this.explains = res.data.explains
					this.currentPrice = JSON.stringify(res.data.currentPrice)
					this.originalPrice = JSON.stringify(res.data.originalPrice)
					this.redPackets = JSON.stringify(res.data.money)
					console.log(res.data)

					let currentPrice = res.data.currentPrice
					let couponPoList = res.data.couponPoList
					this.actList = []
					// console.log(couponPoList)
					// 循环优惠券数组，判断是否能使用优惠券
					if (couponPoList.length == 0) {
						this.presentmoney = currentPrice - this.redPackets
					} else {
						couponPoList.forEach((value, index, couponPoList) => {
							if (currentPrice >= value.satisfyMoney) {
								this.discountsMoney = value.subtractMoney
								this.presentmoney = currentPrice - this.discountsMoney - this.redPackets
								// 券后金额大于0显示本身，小于0显示0
								this.presentmoney = this.presentmoney > 0 ? this.presentmoney : 0
								console.log(this.presentmoney)
								this.actList.push(value.id)
								console.log(this.actList)
							} else {
								this.discountsMoney = 0
								this.presentmoney = currentPrice - this.discountsMoney
							}
						})
					}
				}
			}
			this.$http.request(requestPay)

		},

		methods: {
			open(presentmoney) {
				this.userMoney = presentmoney
				this.$refs.popup.open()
				const requestMoney = {
					url: `/api/account/accountMoney`,
					method: "post",
					callBack: (res) => {
						this.text = 'request success';
						this.money = JSON.stringify(res.data.sumMoney)
						// console.log(this.money);
					}
				}
				this.$http.request(requestMoney)
			},

			radioChange: function(evt) {
				this.payType = evt.detail.value
				console.log(this.payType, 222)
			},

			// 监听输入备注框
			onInput(e) {
				this.value = e.detail.value
				console.log(this.value)
			},

			// 结算支付
			deter() {
				if (this.canPay == true) {
					console.log(122)
					this.payType = 2
				}
				// console.log(this.payType)
				// return
				if (this.payType == 1) {
					console.log(123)
					const requestYue = {
						url: `/api/weChatPayToCourseT`,
						method: "POST",
						data: {
							commodityId: this.optionId,
							postscript: this.value,
							coupons: this.actList,
							num: 1,
							type: 1
						},
						callBack: (res) => {
							this.text = 'request success';
							this.orderId = res.data.orderId;
							console.log(this.orderId)
							if (res.code == 200) {
								if (res.data.state == 200) {
									this.$refs.popup.close()
									uni.showToast({
										title: '余额支付成功',
										duration: 2000
									})
									setTimeout(() => {
										
										uni.navigateTo({
											url: '../my/Noevaluated?orid='+ this.orderId
										})
									}, 2000)
								} else if (res.data.state == 201) {
									uni.showToast({
										title: '余额小于实际支付金额',
										duration: 3000
									})

								} else if (res.data.state == 208) {
									uni.showToast({
										title: '参数错误',
										duration: 2500
									})
								}
							}
						}
					}
					this.$http.request(requestYue)
				}
				else {
					console.log(123)
					const requestWeixin = {
						url: `/api/weChatPayToCourseT`,
						method: "POST",
						data: {
							commodityId: this.optionId,
							postscript: this.value,
							coupons: this.actList,
							num: 1,
							type: 2
						},
						callBack: (res) => {
							this.orderId = res.data.orderId;
							console.log(this.orderId)
							let that=this;
							wx.requestPayment({
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: "prepay_id=" + res.data.prepayId,
								signType: 'MD5',
								paySign: res.data.paySign,
								success(res) {
									this.$refs.popup.close()
									console.log("成功", res)
									setTimeout(() => {
										uni.navigateTo({
											url: '../my/Noevaluated?orid='+ this.orderId
										})
									}, 2000)
								},
								fail(res) {
									console.log("失败", res)
									// 微信取消支付回调
									const requestCancel = {
										url: `/api/userCourseOrderNotifyResult/${that.orderId}`,
										method: "get",
										callBack: (res) => {
											console.log(res);
											that.text = 'request success';
											if(res.code == 200){
												if(res.data == true){
													uni.showToast({
														title: '取消支付成功',
														duration: 2500
													})
												}else{
													uni.showToast({
														title: '订单id异常',
														duration: 2500
													})
												}
											}
										}
									}
									that.$http.request(requestCancel)
								}
							})
						}
					}
					this.$http.request(requestWeixin)
				}
			},

		}
	}
</script>

<style>
	.showProp {
		width: 600rpx;
		height: 320rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.showProp .showtitle {
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-bottom: 4rpx solid #F1F1F1;
	}

	.uni-list {
		padding: 20rpx;
	}

	.payList {
		display: flex;
		flex-direction: column;
		line-height: 60rpx;
	}

	.sub {
		width: 600rpx;
	}

	.sub button {
		width: 600rpx;
		border: none;
		background-color: #FEC200;
	}

	.monenybug input {
		font-size: 24rpx;
		color: #999999;
	}

	.Purchasemain {
		width: 100%;
		height: 100vh;
		background-color: #EDEDED;
	}

	.Purchasehd {
		padding: 1rpx;
	}

	.head {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.aboutALL {
		height: 400rpx;
		background-color: #FFFFFF;
		border-radius: 6%;
		margin: 20rpx;
		position: relative;
	}

	.goodsname {
		display: flex;
		align-items: center;
	}

	.conent {
		padding-left: 22rpx;
	}

	.goodscont {
		display: flex;
		border-bottom: 1px solid #F1F1F1;
		padding-bottom: 20rpx;
		height: 186rpx;
	}

	.goodscont .money {
		color: #333333;
		font-size: 24rpx;
		position: absolute;
		top: 130rpx;
		right: 20rpx;
	}

	.goodspay {
		display: flex;
		flex-direction: row;
		/* margin-left: 60rpx; */
		margin-left: 140rpx;
		margin-top: 10rpx;
	}

	.usered {
		height: 164rpx;
		width: 710rpx;
		background-color: #FFFFFF;
		margin-left: 20rpx;
		border-radius: 10px;
	}

	.redbug {
		height: 80rpx;
		width: 710rpx;
		border-bottom: 2rpx solid #EEEEEE;
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 80rpx;
		margin-left: 20rpx;
	}

	.monenybug {
		color: #000000;
		font-size: 32rpx;
		line-height: 84rpx;
		margin-left: 20rpx;
	}

	.monenybug text:nth-child(2) {
		margin-left: 430rpx;
	}

	.usered:last-of-type {
		margin-top: 30rpx;
	}

	.paymoney {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 9rpx 10rpx 9rpx 20rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.paymoney_all {
		margin-right: 20rpx;
	}

	.other {
		display: flex;
		flex-direction: column;
		color: #FDC200;
		font-size: 20rpx;

	}

	.acturpay {
		width: 206rpx;
		height: 80rpx;
		background-color: #FDC200;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
		margin-left: 180rpx;
	}
</style>
